<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="description" content="不超过150个字符" />
    <meta name="keywords" content="" />
    <meta content="caibaojian" name="author" />
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"> -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">    
    <link rel="stylesheet" href="../static/css/cart.css">
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script> -->
    <!-- 设计稿 1rem = 100px -->
    <script src="../static/js/flexible.js"></script>
    <script src="../static/js/weui.js"></script>
    <!-- 滚动插件 -->
    <!-- <script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script> -->
    <title>麦谷道</title>
</head>
<body>
<div class="cart-container">
    <div class="header">
        <div class="top-bar flex-r-b">
            <div class="left"></div>
            <div>购物车</div>
            <div class="right clear">清空</div>
        </div>
    </div>
    <!-- 购物车列表 -->
    <div class="cart-list">
        <!-- 商品 card -->
        <div class='cart-card flex-r-b'>
            <div class="left">
                <label class="check-label " >
                    <input type="checkbox" checked name='check-cl' id='cl0' />
                    <i class="icon-checked"></i>
                </label>
            </div>
            <div class="img">
                <img src="../static/images/index/img_9.png" alt="">
            </div>
            <div class="right flex-c-b">
                <p class="name ellipsis">法式布蕾蛋糕 Pandora</p>
                <p class="size flex-r-b">
                    <span>尺寸：6寸</span>
                    <span>含五盘五叉</span>
                    <span class="birthday">+添加生日牌</span>
                </p>
                <p class="flex-r-b">
                    <span class="price">￥198</span>
                </p>
                <div class='count-box flex-r-b'>
                    <span class="minus"></span>
                    <input type="number" readonly value='1' />
                    <span class="plus"></span>
                </div>
            </div>
        </div>
        <!-- 商品 card -->
        <div class='cart-card flex-r-b'>
            <div class="left">
                <label class="check-label " >
                    <input type="checkbox" name='check-cl' id='cl1' />
                    <i class="icon-checked"></i>
                </label>
            </div>
            <div class="img">
                <img src="../static/images/index/img_9.png" alt="">
            </div>
            <div class="right flex-c-b">
                <p class="name ellipsis">法式布蕾蛋糕 Pandora</p>
                <p class="size flex-r-b">
                    <span>尺寸：6寸</span>
                    <span>含五盘五叉</span>
                    <span class="birthday">+添加生日牌</span>
                </p>
                <p class="flex-r-b">
                    <span class="price">￥198</span>
                </p>
                <div class='count-box flex-r-b'>
                    <span class="minus"></span>
                    <input type="number" readonly value='1' />
                    <span class="plus"></span>
                </div>
            </div>
        </div>
        <!-- 商品 card -->
        <div class='cart-card flex-r-b'>
            <div class="left">
                <label class="check-label " >
                    <input type="checkbox"  />
                    <i class="icon-checked"></i>
                </label>
            </div>
            <div class="img">
                <img src="../static/images/index/img_9.png" alt="">
            </div>
            <div class="right flex-c-b">
                <p class="name ellipsis">法式布蕾蛋糕 Pandora</p>
                <p class="size flex-r-b">
                    <span>尺寸：6寸</span>
                    <span>含五盘五叉</span>
                    <span class="birthday">+添加生日牌</span>
                </p>
                <p class="flex-r-b">
                    <span class="price">￥198</span>
                </p>
                <div class='count-box flex-r-b'>
                    <span class="minus"></span>
                    <input type="number" readonly value='1' />
                    <span class="plus"></span>
                </div>
            </div>
        </div>
        <!-- 商品 card -->
        <div class='cart-card flex-r-b'>
            <div class="left">
                <label class="check-label " >
                    <input type="checkbox" checked />
                    <i class="icon-checked"></i>
                </label>
            </div>
            <div class="img">
                <img src="../static/images/index/img_9.png" alt="">
            </div>
            <div class="right flex-c-b">
                <p class="name ellipsis">法式布蕾蛋糕 Pandora</p>
                <p class="size flex-r-b">
                    <span>尺寸：6寸</span>
                    <span>含五盘五叉</span>
                    <span class="birthday">+添加生日牌</span>
                </p>
                <p class="flex-r-b">
                    <span class="price">￥198</span>
                </p>
                <div class='count-box flex-r-b'>
                    <span class="minus"></span>
                    <input type="number" readonly value='1' />
                    <span class="plus"></span>
                </div>
            </div>
        </div>
        <!-- 商品 card -->
        <div class='cart-card flex-r-b'>
            <div class="left">
                <label class="check-label " >
                    <input type="checkbox" checked />
                    <i class="icon-checked"></i>
                </label>
            </div>
            <div class="img">
                <img src="../static/images/index/img_9.png" alt="">
            </div>
            <div class="right flex-c-b">
                <p class="name ellipsis">法式布蕾蛋糕 Pandora</p>
                <p class="size flex-r-b">
                    <span>尺寸：6寸</span>
                    <span>含五盘五叉</span>
                    <span class="birthday">+添加生日牌</span>
                </p>
                <p class="flex-r-b">
                    <span class="price">￥198</span>
                </p>
                <div class='count-box flex-r-b'>
                    <span class="minus"></span>
                    <input type="number" readonly value='1' />
                    <span class="plus"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-bar">
        <div class="tip">
            <p>订单满<span>299</span>元免费配送(不包含虚拟商品)</p>
        </div>
        <div class="settlement flex-r-b">
            <div class="left flex-r-b">
                <label class="check-label">
                    <input type="checkbox" name="toggleAll" id=''/>
                    <i class="icon-checked"></i>
                </label>
                <div class="right flex-r-b">
                    <span>已选（1）</span>
                    <span class="total">￥198.00</span>
                </div>
            </div>
            <a class="settlement-btn" href="./confirm.html">
                去结算
            </a>
        </div>
    </div>
    <!-- 底部导航条 -->
    <nav class="navBar flex-r-b">
        <a class="navItem active" href="./index.html">
            <div class="icon icon-home">
                <!-- <img src="../../static/images/index/iocn_4.png" alt=""> -->
                <img src="../../static/images/index/iocn_4s.png" alt="">
            </div>
            <div class="text">首页</div>
        </a>
        <a class="navItem" href="./allCategories.html">
            <div class="icon icon-all">
                <img src="../../static/images/index/iocn_5.png" alt="">
            </div>
            <div class="text">所有产品</div>
        </a>
        <a class="navItem" href="./cart.html">
            <div class="icon icon-cart">
                <img src="../../static/images/index/iocn_6.png" alt="">
            </div>
            <div class="text">购物车</div>
        </a>
        <a class="navItem" href="./orders.html">
            <div class="icon icon-member">
                <img src="../../static/images/index/iocn_7.png" alt="">
            </div>
            <div class="text">会员中心</div>
        </a>
        <a class="navItem" href="">
            <div class="icon icon-customer">
                <img src="../../static/images/index/iocn_8.png" alt="">
            </div>
            <div class="text">客服</div>
        </a>
    </nav>
    <!-- 生日牌弹窗 -->
    <div class="birthday-modual">
        <div class="content">
            <div class="top flex-r-b">
                <span class="left"></span>
                <span class="text">添加生日牌</span>
                <span class="close"></span>
            </div>
            <div class="birthday-text">
                <label class="radio-label flex-r-b" for='radio1'>
                    <span class="left">自定义</span>
                    <input type="text" class="user-text"  maxlength="8" placeholder="最多可输入8个字">
                    <div class="right-radio ">
                        <input type="radio" name="birthday" id='radio1'/>
                        <i class="icon-checked"></i>
                    </div>
                </label>
                <label class="radio-label flex-r-b" for='radio2'>
                    <span class="left"></span>
                    <span>不需要</span>
                    <div class="right-radio ">
                        <input type="radio" name="birthday" id='radio2'/>
                        <i class="icon-checked"></i>
                    </div>
                </label>
                <label class="radio-label flex-r-b" for='radio3'>
                    <span class="left"></span>
                    <span>生日快乐</span>
                    <div class="right-radio ">
                        <input type="radio" name="birthday" id='radio3'/>
                        <i class="icon-checked"></i>
                    </div>
                </label>
                <label class="radio-label flex-r-b" for='radio4'>
                    <span class="left"></span>
                    <span>Happy Birthday</span>
                    <div class="right-radio ">
                        <input type="radio" name="birthday" id='radio4'/>
                        <i class="icon-checked"></i>
                    </div>
                </label>
                <div class="confirm">
                    确定
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
   (function () {
        window.onload = function () {
            showBirthday()
            clearCart()
        }
        var cart={}
    //清空购物车
    function clearCart(){
        var clear = document.querySelector('.clear')
        var cartList = document.querySelector('.cart-list')
        clear.onclick = function(){
        weui.confirm('确定删除该商品？', 
                function(){ console.log('yes') },
                function(){ console.log('no') },
                { title: '温馨提示' }
        );
            
        }
    }
    // 弹窗动画 
      function showBirthday(){
        var btn = document.querySelector('.birthday')
        var content = document.querySelector('.birthday-modual>.content')
        var modual = document.querySelector('.birthday-modual')
        var close = document.querySelector('.close')
        var userText = document.querySelector('.user-text')
        var page = document.querySelector('.cart-container')
        userText.onfocus = function(){
        // 光标错位 解决方案一 （面页会跳到顶部）
            page.classList.add('overflow')
        }
        userText.onblur = function(){
            page.classList.remove('overflow')
        }
        btn.onclick = function(){
            modual.classList.add('show')
        }
        modual.ontouchmove = function(){
            return false
        }
        modual.onclick = function(e){
            this.classList.remove('show')
        }
        content.onclick = function(e){
            e.stopPropagation()
        }
        close.onclick = function(){
            modual.classList.remove('show')
        }
      }
    })()
</script>
</html>